<!-- 巅峰人才榜 童晓白 2025-07-25	-->
<template>
  <view class="apex-select">
    <!-- #ifdef H5 -->
    <select :value="modelValue" @change="onChange" class="apex-select-inner">
      <option value="" disabled selected hidden>{{ placeholder }}</option>
      <option v-for="(opt, idx) in options" :key="opt.value ?? opt" :value="opt.value ?? opt">
        {{ opt.label ?? opt }}
      </option>
    </select>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <picker :range="pickerLabels" :value="pickerIndex" @change="onPickerChange" class="apex-select-inner">
      <view class="picker-text">
        {{ pickerLabels[pickerIndex] || placeholder }}
      </view>
    </picker>
    <!-- #endif -->
  </view>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
const props = defineProps({
  modelValue: [String, Number],
  options: {
    type: Array,
    default: () => []
  },
  placeholder: String
})
const emit = defineEmits(['update:modelValue', 'change'])

// H5
function onChange(e) {
  emit('update:modelValue', e.target.value)
  emit('change', e.target.value)
}

// 小程序
const pickerLabels = computed(() => props.options.map(opt => opt.label ?? opt))
const pickerIndex = ref(0)
watch(
  () => props.modelValue,
  (val) => {
    const idx = props.options.findIndex(opt => (opt.value ?? opt) == val)
    pickerIndex.value = idx === -1 ? 0 : idx
  },
  { immediate: true }
)
function onPickerChange(e) {
  const idx = e.detail.value
  pickerIndex.value = idx
  const val = props.options[idx]?.value ?? props.options[idx]
  emit('update:modelValue', val)
  emit('change', val)
}
</script>

<style scoped>
.apex-select-inner {
  background: #ffffff;
  color: #4A90E2;
  border: 1.5px solid #4A90E2;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.92rem;
  font-weight: bold;
  outline: none;
  min-width: 70px;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  transition: border 0.2s;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.apex-select-inner:focus {
  border: 1.2px solid #005bea;
}
.picker-text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
@media (max-width: 480px) {
  .apex-select-inner {
    font-size: 0.85rem;
    padding: 2px 4px;
    min-width: 50px;
    height: 24px;
    border-radius: 4px;
  }
  .picker-text {
    font-size: 0.85rem;
    padding: 2px 0;
  }
}
.apex-select-row .apex-select {
  flex: 1 1 0;
  min-width: 0;
}
</style> 